<script lang="ts">
  export let borderColor = "#02a6b5";
  export let mainBorderColor = "rgba(25, 186, 139, 0.17)";
  export let bgColor = "";
  export let cornerSize = "1.4rem";
  export let padding = "1rem";
</script>

<div class="border-card" style="padding: {padding}; --border-color: {borderColor}; --main-border-color: {mainBorderColor}; --bg-color: {bgColor}; --corner-size: {cornerSize}">
  <div class="content">
    <slot></slot>
  </div>
  <div class="corner top-left"></div>
  <div class="corner top-right"></div>
  <div class="corner bottom-left"></div>
  <div class="corner bottom-right"></div>
</div>

<style>
  .border-card {
    position: relative;
    background-color: var(--bg-color);
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid var(--main-border-color);
  }
  
  .content {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
  }
  
  .corner {
    position: absolute;
    width: var(--corner-size);
    height: var(--corner-size);
  }
  
  .top-left {
    top: 0;
    left: 0;
    border-top: 0.2rem solid var(--border-color);
    border-left: 0.2rem solid var(--border-color);
  }
  
  .top-right {
    top: 0;
    right: 0;
    border-top: 0.2rem solid var(--border-color);
    border-right: 0.2rem solid var(--border-color);
  }
  
  .bottom-left {
    bottom: 0;
    left: 0;
    border-bottom: 0.2rem solid var(--border-color);
    border-left: 0.2rem solid var(--border-color);
  }
  
  .bottom-right {
    bottom: 0;
    right: 0;
    border-bottom: 0.2rem solid var(--border-color);
    border-right: 0.2rem solid var(--border-color);
  }
</style>